import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
import { Table } from 'antd';
import Modal from '@/components/Modal';
import { relationOrder } from '@/api/modules/recovery';

import "./index.less";

const Comp = forwardRef((props: any, ref: any) => {
    const [modelObj, setModalObj] = useState({
        width: '700px',
        title: '关联号码订单',
        open: false,
        loading: false,
        confirmLoading: false,
        mobile: '',
    });
    const [dataSrouce, setDataSource]: any = useState([]);

    const getOrder = async () => {
        try {
            setModalObj((pre) => ({ ...pre, loading: true, confirmLoading: true }));
            const { data }: any = await relationOrder({ mobile: modelObj.mobile });
            setDataSource((data && data.data) || []);
            setModalObj((pre) => ({ ...pre, loading: false, confirmLoading: false }));
        } catch (err) {
            setModalObj((pre) => ({ ...pre, loading: false, confirmLoading: false }));
            console.log(err);
        }
    };

    useEffect(() => {
        if (modelObj.open === true) getOrder();
    }, [modelObj.open]);
    const onCancel = () => {
        setModalObj((pre) => ({ ...pre, open: false }));
    };
    useImperativeHandle(ref, () => ({
        show: ({ mobile }: any) => setModalObj((pre) => ({ ...pre, open: true, mobile })),
    }));

	return (
        <Modal {...modelObj} onCancel={onCancel} loading={false}>
            <Table
                bordered
                loading={modelObj.loading}
                dataSource={dataSrouce}
                columns={[{
                    title: '下单号码',
                    dataIndex: 'number',
                }, {
                    title: '下单人',
                    dataIndex: 'distributor_name',
                }, {
                    title: '下单项目',
                    dataIndex: 'project_name',
                }, {
                    title: '下单时间',
                    dataIndex: 'place_order_day',
                }]}
                pagination={false}
            />
        </Modal>
	);
});

Comp.displayName = 'recovery-form-modal';

export default Comp;
